<template>
  <div class="login-page">
    <div class="login-content">
      <div class="login-label">
        <img src="@/assets/loginContent.webp" />
      </div>

      <div class="login-frame">
        <ElForm label-width="auto">
          <ElFormItem label="用户名">
            <ElInput  v-model="account.username" ref="uname" @keyup.enter="loginBack()"></ElInput>
          </ElFormItem>
          <ElFormItem label="密码">
            <ElInput v-model="account.password" type="password" @keyup.enter="loginBack()"></ElInput>
          </ElFormItem>
          <ElButton type="primary" @click="loginBack()" class="login-button" >登录</ElButton>
        </ElForm>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useMenuStore } from '@/stores/menu'
import { login } from '@/apis/auth'
// import lodash from 'lodash'

const router = useRouter()
const store = useMenuStore()
// 声明data变量 页面本地变量
const account = reactive({
  username: '',
  password: '123456'
})
const uname:any = ref(null);
const loginBack = async () => {
  // const res = await axios({
  //   method: 'post',
  //   url: `/employee/login?username=${account.username}&password=${account.password}`
  // })
  const res = await login(account.username, account.password)
  store.token = res.data.token
  store.appFlushed = false
  router.push('/appContext')
}

onMounted(()=>{
  // console.log(uname.value)
  uname.value.focus()

})
</script>

<style lang="scss" scoped>
.el-form {
  width: 300px;
  // border: solid 1px rebeccapurple;
  margin-left: 100px;
}

.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login-content {
  display: flex;
  width: 1024px;
  height: 400px;
}
.login-label {
  overflow: hidden;
  min-width: 600px;
  img {
    transform: translate(-100px, -10px);
  }
}
.login-frame {
  display: flex;
  align-items: center;
}
.login-button{
  width: 100%;
}
</style>
